<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <h1>
      <span>C</span>
      <span>o</span>
      <span>d</span>
      <span>i</span>
      <span>n</span>
      <span>g</span>
      <span>S</span>
      <span>t</span>
      <span>a</span>
      <span>r</span>
      <span>t</span>
      <span>u</span>
      <span>p</span>
    </h1>
    <style>
      :root {
        font-size: 20px;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }

      h1 {
        font-size: 6rem;
        margin: 0;
        padding: 0;
        font-family: monospace;
        position: relative;
      }

      h1::after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 6rem;
        background-color: #000;
        border-radius: 2px;
        right: -30px;
        opacity: 0;
        animation: 1.1s cursor steps(2, jump-none) infinite;
        animation-delay: 1.6s;
      }

      @keyframes cursor {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      h1 span {
        display: inline-block;
        overflow: hidden;
        width: 0ch;
        animation: 0.1s text-in ease-in-out forwards;
      }

      @keyframes text-in {
        from {
          width: 0ch;
        }
        to {
          width: 1ch;
        }
      }

      /* 为每个字符设置延迟时间 */
      h1 span:nth-child(1) {
        animation-delay: 0s;
      }

      h1 span:nth-child(2) {
        animation-delay: 0.1s;
      }

      h1 span:nth-child(3) {
        animation-delay: 0.2s;
      }

      h1 span:nth-child(4) {
        animation-delay: 0.3s;
      }

      h1 span:nth-child(5) {
        animation-delay: 0.4s;
      }

      h1 span:nth-child(6) {
        animation-delay: 0.5s;
      }

      h1 span:nth-child(7) {
        animation-delay: 0.9s; /* 第7个字符额外延迟0.3s */
      }

      h1 span:nth-child(8) {
        animation-delay: 1.0s;
      }

      h1 span:nth-child(9) {
        animation-delay: 1.1s;
      }

      h1 span:nth-child(10) {
        animation-delay: 1.2s;
      }

      h1 span:nth-child(11) {
        animation-delay: 1.3s;
      }

      h1 span:nth-child(12) {
        animation-delay: 1.4s;
      }

      h1 span:nth-child(13) {
        animation-delay: 1.5s;
      }
    </style>
  </body>
</html>
